North by North Pole - Episode 1: The Santom Menace

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div class="container"><img src="images/title02.png" alt="North by North Pole Game" class="game-image"><div class="sidebar"><span class="ojuju-button">[[Start Game|AvatarSelector]]</span><span class="ojuju-button">[[Credits]]</span> </div> </div>  <img id="audioOrnament" src="images/audioOrnament-off.png" alt="Toggle Music" class="corner-image" onclick="toggleMusicDirect()" style="cursor: pointer;"> <audio id="bgMusic" loop> <source src="audio/Start.mp3" type="audio/mpeg"> </audio> <script> window.musicPlaying = false; window.toggleMusicDirect = function () { const audio = document.getElementById("bgMusic"); const ornament = document.getElementById("audioOrnament"); if (!audio || !ornament) return; if (window.musicPlaying) { audio.pause(); ornament.src = "images/audioOrnament-off.png"; window.musicPlaying = false; } else { audio.play(); ornament.src = "images/audioOrnament-on.png"; window.musicPlaying = true; } }; </script>

<<run playBarMusic()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble">I'm the Mall Santa.</div></div><div class="dialogue-row right"><div id="player-avatar-container"></div><div class="chat-bubble">[[The what?|A]]</div></div></div><<script>>setTimeout(function(){var container=document.getElementById("player-avatar-container");var avatar=State.variables.avatarImg;if(container&&avatar){container.innerHTML='<img src="images/'+avatar+'" class="avatar-img flipped">';}},50);<</script>>

<<cacheaudio "startmusic" "audio/Start.mp3">> <<set $musicPlaying to false>> <<set $petuniaAwake to false>> <<set $avatarImg to "">> <<set $santaLabel to "">> <<if $playthroughCount is undefined>>\ <<set $playthroughCount to 1>>\ <</if>> <<if $santaBucks is undefined>>\ <<set $santaBucks to 0>>\ <</if>> <<set $avatarImg to $avatarImg or "Male_06.svg">> <<set $santaLabel to $santaLabel or "boy">>

Story by: Alyssa Foote Artwork by: Alyssa Foote (Intro logo heavily drawing from Saul Bass) Coding by: Alyssa Foote (with help from AI to debug and work out some kinks here and there) Music Credits: 12 Days of Christmas by TheLastOneOnEarth -- License: Creative Commons 0 erickvillegas1986 | License: Attribution 4.0 Christmas Melody Loop by xXSamilYTXx | License: Creative Commons 0 Huge shout out to my beloved playtesters: Janelle Bawayan, Todd Diemer, Albert Hwang, David Rheinstrom, Michael Bang, Faryn Davis Bang, Corey Cudney, Nathanial H, Alec Steele, Liz and Chad Roffey, Brandon Shiluk, Michael V. Jordan

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble">It's the Christmas spirit, $santaLabel! <br>[[It can't be contained!|C]]</div></div></div>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble">I SAID I'M THE MALL SANTA.</div></div><div class="dialogue-row right"><div id="player-avatar-container"></div><div class="chat-bubble">[[There's no need to shout.|B]]</div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-container");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right top">[[You're telling me you're the “Mall Santa” here at the strip mall?|1A]]</div><div class="chat-bubble-right middle">[[You gotta order something buddy, you can't just sit there and yell all night.|1B]]</div><div class="chat-bubble-right bottom">[[You see, Petunia? This is why we don’t keep the bar open on Christmas Eve.|1C]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">Why yes, <<= _nick >>! The Smokeatorium three doors down has a delightfully <em>festive</em> back alley—glowing with the light of a real life <<linkappend "dumpster fire!">><br>I may have roasted a chestnut or two [[if you know what I mean!|Chestnut]]<</linkappend>></div></div></div>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">Oh, I’ll order something, just you wait! But first… <<linkappend "there’s something I need to tell you.">> And just so you know… if we go through with this, [[we might both end up on the naughty list.|Um]]<</linkappend>></div></div></div>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left decision-mode"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble decision-option solo-decision">Were you just speaking to a <em>gremlin</em> there on the mantle, <<= _nick >>? What is that thing?<br><br>[[Let me get a closer look...|TheHorror]]</div></div></div><<set $petuniaAwake to true>>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right top">[[Are you talking about the vape shop that was condemned in 2005?|2B]]</div><div class="chat-bubble-right middle">[[Order something or get out.|1B]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"> <div class="chat-bubble-left top">What if I told you that I'm more than just a <<linkappend "Mall Santa?">> What if I told you I'm something <<linkappend "holly-er...">> and dare I say... <<linkappend "jolly-er?">> What if I told you I had the power to <<linkappend "jingle all the way?">> ...Now tell me, <<= _nick >>… is this intriguing enough to earn me a free Appletini before I reveal all my [[mysterious secrets?|Intrigue]]<</linkappend>><</linkappend>><</linkappend>><</linkappend>> </div></div></div>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">That's the one, <<= _nick >>! Now there's no time to dwell on things like "logistics" or "plausibility." [[We have urgent matters to discuss!|Mystery]]</div></div></div>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right top">[[Petunia's co-owner of the bar and the love of my life. And yes, also a taxidermy pug.|3A]]</div><div class="chat-bubble-right middle">[[Show some respect, or get out of my bar.|3B]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">It's disturbing <<= _nick >>, but it suits you perfectly! A surly strip mall bartender with a gargoyle as a pet?<br><br>You must get a lot of <em>Christmas Tang</em> [[ if you know what I mean.|Cops]]</div></div></div><<script>>setTimeout(function(){var c=document.getElementById("santa-avatar-decision");if(c){c.innerHTML='<img src="images/MallSanta.svg" class="avatar-img">';}},50);<</script>>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">I have seen some horrendous things in my lifetime but nothing as haunting as that <<linkappend "creature.">> What did you say it was? <<linkappend "A pug?">><br>[[Let me take another look at this thing.|Abomination]]<</linkappend>><</linkappend>></div></div></div>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right top">[[Intrigue costs 17.99 plus tip for an Appletini.|3C]]</div><div class="chat-bubble-right middle">[[Are you implying you’re Santa Claus? Like, sleigh and reindeer included?|3D]]</div><div class="chat-bubble-right bottom">[[What do we make of this, Petunia?|3E]]</div></div></div></div><script>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=SugarCube.State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);</script>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">I'm fresh out of legal tender... but I do have something else that might [[light up your tree...|GlowOrnament]]</div></div></div>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left middle">[[I might be... I just might be|GlowOrnament]]</div></div></div>

<div class="scene-wrapper" style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; margin:0 auto;"><img src="images/PetuniaLarge.svg" alt="Petunia" style="width:100%; max-width:900px; display:block;"><div class="chat-bubble-right top" style="text-align:center;">She's in.<br>But she wants some sweet talkin' [[before we make that drink.|Origins]]</div></div>

<div class="scene-wrapper" style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; margin:0 auto;"><img src="images/PetuniaLarge.svg" alt="Petunia" style="width:100%; max-width:900px; display:block;"><div class="chat-bubble-right top" style="text-align:center;">What in the HOLIDAY HECK is that!? <br>[[It's staring straight into my soul!|Petunia]]</div></div>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right middle">[[Order a drink and make it quick or I'm calling the cops.|1B]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<div class="selection-title">YOU ARE A BARTENDER.<br>WHAT DO YOU LOOK LIKE?</div><audio id="jingleSound" src="audio/Ornament.wav" preload="auto"></audio><div class="avatar-grid"><button class="avatar-button" data-img="Female_01.svg" data-label="femrandom"><img class="avatar-img" src="images/Female_01.svg" alt="Female 01"></button><button class="avatar-button" data-img="Male_02.svg" data-label="boy"><img class="avatar-img" src="images/Male_02.svg" alt="Male 02"></button><button class="avatar-button" data-img="Female_03.svg" data-label="femrandom"><img class="avatar-img" src="images/Female_03.svg" alt="Female 03"></button><button class="avatar-button" data-img="NonBinary_04.svg" data-label="random"><img class="avatar-img" src="images/NonBinary_04.svg" alt="Nonbinary 01"></button><button class="avatar-button" data-img="Female_05.svg" data-label="femrandom"><img class="avatar-img" src="images/Female_05.svg" alt="Female 05"></button><button class="avatar-button" data-img="Male_06.svg" data-label="boy"><img class="avatar-img" src="images/Male_06.svg" alt="Male 06"></button></div><<if $avatarImg is not undefined>><<if $santaLabel is "boy">><<set $santaFamilySentence = "You're like a son to me! I'm not hitting on you!">><<elseif $santaLabel is "bestie" or $santaLabel is "girliepop" or $santaLabel is "sugarplum" or $santaLabel is "sleigh bae">><<set $santaFamilySentence = "We're besties, girliepop! I'm married to Mrs. Claus, remember?">><<elseif $santaLabel is "random" or $santaLabel is "bucko" or $santaLabel is "kid" or $santaLabel is "you little elf on the shelf" or $santaLabel is "you silly goose">><<set $santaFamilySentence = "You're my ride-or-die, kid! No weird vibes, just holiday chaos.">><<else>><<set $santaFamilySentence = "You're like a festive comrade-in-arms. Pure sleigh team energy.">><</if>><div style="text-align: center; margin-top: 2em;"><span class="selection-footer">[[CONTINUE|Poem]]</span></div><</if>>

<<run playPoemMusic()>><div class="poem-container"> ’Twas the night before Christmas, last call was in sight, <<linkappend " When a stranger walked in. His vibes? Not quite right.">> <<linkappend " His look was unhinged—half myth and half man,">> <<linkappend " The kind who'd drink eggnog straight from the can.">> <<linkappend " He sat at the bar, his demeanor quite grim.">> <<linkappend " I almost felt sorry — ''almost'' — for him.">> <<linkappend " He mumbled a phrase, a seasonal mantra...">> [[He stood from his stool and said...|Intro]] <</linkappend>><</linkappend>><</linkappend>><</linkappend>><</linkappend>><</linkappend>> </div>

<div class="scene-wrapper"><div class="dialogue-row left decision-mode"><div id="player-avatar-decision" class="avatar-img"></div><div class="decision-bubbles"><div class="chat-bubble decision-option">[[Hold on… you’re the “Mall Santa” here at the strip mall?|SantaConfirm]]</div><div class="chat-bubble decision-option">[[You gotta order something, buddy. You can’t just sit there and yell all night.|SantaOrder]]</div><div class="chat-bubble decision-option">[[You see, Petunia? This is why we don’t keep the bar open on Christmas Eve.|SantaSarcasm]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img">';}},50);<</script>>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right top">[[You're barking up the wrong tree, dude|1BA]]</div><div class="chat-bubble-right middle">[[What exactly are you trying to tell me?|Mystery]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top"><<linkappend "I'm not hitting on you!">><br>Truth is… <<linkappend "I don’t have anyone else to turn to.">><br>I wasn't going to come in here, but something about this place <<linkappend "called to me...">> the busted Christmas decor, the stale beer in the air… <<linkappend "you—">>You've got the kind of aura that says: [[“Let's destroy a sacred holiday institution on a whim.”|NotTrue]]<</linkappend>><</linkappend>><</linkappend>><</linkappend>></div></div></div>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left middle">Nothing melts a monster's heart like a mysterious artifact with origins unknown. Here, Petunia, [[a gift for you.|GlowOrnament]]</div></div></div>

<<run new Audio("audio/Magical.wav").play()>><div class="scene-wrapper" style="display:flex;flex-direction:column;align-items:center;justify-content:center;"><canvas id="riveOrnament" width="800" height="800" style="max-width:100%;border:2px solid transparent;"></canvas><div class="chat-bubble-right top" style="text-align:center;">[[What is this?|4A]]</div></div><script>function waitForRiveAndLoad(){if(window.rive&&window.rive.Rive){console.log("✅ Rive is ready.");window.loadRiveAnimation("riveOrnament","images/Glowing.riv");}else{console.log("⏳ Waiting for Rive...");setTimeout(waitForRiveAndLoad,100);}}waitForRiveAndLoad();</script>

<div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left middle">An invitation. A weapon. A warning. Depends on how you use it, $santaLabel. Go on then. [[Give it a touch.|Touch]]</div></div></div>

THAT'S IT FOR THIS LIL PROTOTYPE! THANK YOU SO MUCH FOR PLAYING!! If you're seeing this that means you generously spent time playing this, so THANK YOU. I would love any feedback you have for me, it would really help me improve my game making skills! <a href="https://bit.ly/3GDpdOE" target="_blank">Click here to leave feedback (thank you!)</a> [[Try Some Other Storylines?|Intro]]

<div class="monologue-wrapper"><div class="chat-bubble monologue">I'm not hitting on you!</div><div class="narration-line">(He laughs nervously, then sighs.)</div><div class="chat-bubble monologue">Truth is… <<linkappend "I don’t have anyone else to turn to.">>I wasn't going to come in here, but something about this place called to me... the busted Christmas decor, the stale beer in the air… <<linkappend "you—">> <</linkappend>><</linkappend>></div><div class="narration-line">(He leans in, whispering)</div><div class="chat-bubble monologue">You’ve got the kind of aura that says: “Let's destroy a sacred holiday institution.”</div><div class="narration-line">(He wipes a tear from his eye)</div><div class="chat-bubble monologue">Whew! Listen to me getting all emotional. Now, listen to your Father Christmas, I have something important to say...</div></div>

<div class="scene-wrapper"><div class="dialogue-row right decision-mode"><div id="player-avatar-decision" class="avatar-img-container"></div><div class="decision-bubbles"><div class="chat-bubble-right middle">[[I'm really regretting my decision to work tonight.|Father]]</div></div></div></div><<script>>setTimeout(function(){var c=document.getElementById("player-avatar-decision");var a=State.variables.avatarImg;if(c&&a){c.innerHTML='<img src="images/'+a+'" class="avatar-img flipped">';}},50);<</script>>

<<set _nick = window.pickNickname()>><div class="scene-wrapper"><div class="dialogue-row left"><img src="images/MallSanta.svg" class="avatar-img"><div class="chat-bubble-left top">There's no time for regrets, <<= _nick >>! [[Now listen to your Father Christmas closely|Mystery]]</div></div></div><<script>>setTimeout(function(){var c=document.getElementById("santa-avatar-decision");if(c){c.innerHTML='<img src="images/MallSanta.svg" class="avatar-img">';}},50);<</script>>

You: 🌀 (LOGIC - IF a petunia option thus far has been picked then this will be available) [You place the ornament at Petunia's mouth.] “Kiss for good luck.” You: 🤔 [You reach out. Your fingertips graze the surface...] You: 🧂 No way in hell I'm touching that thing.

<a href="javascript:void(0);" onclick="toggleMusic()">🔈 Mute/Unmute</a>